import { PreLoadImages } from '@/utils';
import FakeProgress from 'fake-progress';
import { useEffect, useState } from 'react';

import { PreloadAssets } from '@/utils/preLoadAssets';
import { history } from 'umi';
const p = new FakeProgress({
  timeConstant: 20000,
  autoStart: true,
});

const requireContext = require.context(
  '../../public/car/',
  true,
  /\.|png|jpg$/,
);

const requireAll = (context: any) => context.keys().map(context);
const AllCarImages = requireAll(requireContext);

export default function () {
  const [progress, setProgress] = useState<number>(0);
  useEffect(() => {
    const l1 = setInterval(() => {
      console.log('(p.progress * 100) is --', p.progress * 100);
      setProgress(p.progress * 100);
    }, 100);

    PreLoadImages([...AllCarImages, ...PreloadAssets]).then(() => {
      setTimeout(() => {
        p.end();
        clearInterval(l1);
        setProgress(100);

        setTimeout(() => {
          history.replace('/welcome');
        }, 800);
      }, 1000);
    });
  }, []);

  return (
    <>
      <div className=" w-screen h-[6px] bg-[rgba(255,255,255,0.3)] absolute left-0 top-0">
        <i
          className=" block h-full bg-[#00c50c] transition-all"
          style={{
            width: `${progress}%`,
          }}
        ></i>
      </div>

      {/* <section className=" bg-black min-h-screen pt-[400px]">
        <i
          className="w-[86px] h-[122px] block mx-auto"
          style={{
            backgroundImage: `url(${Logo})`,
            backgroundSize: '100% 100%',
          }}
        ></i>
        <div className="w-[400px] h-[4px] bg-[rgba(255,255,255,0.3)] mt-[50px] mx-auto">
          <i
            className=" block h-full bg-primary transition-all"
            style={{
              width: `${progress}%`,
            }}
          ></i>
        </div>
      </section> */}
    </>
  );
}
